<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48' :title="title">
			<view slot='right' style="padding-right: 32rpx;color: #3587F7;font-size: 32rpx;" @click="save">
				保存
			</view>
		</u-navbar>
		<!-- <view class="headBtn">
			<view class="headBtn-item">
				<u-icon name="man-add" color="#3587F7" size="32"></u-icon><text style="margin-left: 8rpx;">新增联系人</text>
			</view>
			<view class="headBtn-item">
				<u-icon name="order" color="#3587F7" size="32"></u-icon><text style="margin-left: 8rpx;">从通讯录导入</text>
			</view>
		</view> -->
		<view class="linkman-info">
			<view class="linkman-infoBox">
				<view class="lable">
					姓名
				</view>
				<input class="input" type="text" v-model="link_name" placeholder="请输入姓名" placeholder-style="font-size:28rpx" />
			</view>
			<view class="linkman-infoBox">
				<view class="lable">
					手机号<u-icon style="margin-left: 4rpx;" name="arrow-down" color="#3587F7" size="24"></u-icon>
				</view>
				<input class="input" style="border-bottom: none;" type="number" v-model="link_tel" placeholder="请输入手机号"
				 placeholder-style="font-size:28rpx" />
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				title: '',
				link_name: '',
				link_tel: '',
				link_id: '', // 联系人id
			}
		},
		onLoad(option) {
			this.title = option.title
			if (option.id) {
				this.link_id = option.id
				this.link_name = option.name
				this.link_tel = option.mobile
			}
		},
		methods: {
			async save() {
				let {
					link_name,
					link_tel,
					link_id
				} = this
				if (!link_name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!link_tel) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				// 验证手机号
				if (this.$u.test.mobile(link_tel)) {
					let res = await myRequest.editMycontacts({
						link_name: link_name,
						link_tel: link_tel,
						link_id: link_id ? link_id : ''
					})
					if (res.status) {
						uni.showToast({
							title: '添加成功'
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1,
							})
						}, 1000)
					}
				} else {
					uni.showToast({
						title: '手机号格式有误',
						icon: 'none'
					})
					return
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	// .headBtn {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	padding: 24rpx 28rpx;

	// 	.headBtn-item {
	// 		width: 336rpx;
	// 		height: 76rpx;
	// 		background: #FFFFFF;
	// 		border-radius: 8rpx;
	// 		text-align: center;
	// 		font-size: 28rpx;
	// 		font-family: Segoe UI;
	// 		font-weight: 400;
	// 		line-height: 76rpx;
	// 		color: #3587F7;
	// 	}
	// }
	.linkman-info {
		padding: 0 28rpx;
		background-color: #FFFFFF;

		.linkman-infoBox {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.lable {
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}

			.input {
				width: 80%;
				height: 100%;
				border-bottom: 2rpx solid #F2F2F2;
				font-size: 32rpx;
			}
		}
	}
</style>
